<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Purple Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css"/>
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!--<link rel="stylesheet" th:href="@{css/bootstrap-switch.css}"/>-->
    <!-- endinject -->
    <link rel="shortcut icon" href="../../images/favicon.png"/>
    <style type="text/css">
        #Conframe {
            border: none;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="showTbody">
    <div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <i class="mdi mdi-home menu-icon"></i>首页/权限/部门管理
        </div>
        <div class="card-body">
            <h4 class="card-title"><i class="mdi mdi-format-list-bulleted menu-icon"></i>数据列表</h4>
            <div class="text-right">
                <!-- Button trigger modal -->
                <button id="addDeptBtn" type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">
                    添加
                </button>
            </div>
            <br/>
            <!-- 弹出层添加列表 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <h4 class="modal-title text-center" id="myModalLabel">添加部门</h4>
                        <form class="forms-sample" id="editDeptFrom">
                            <input type="hidden" id="editDeptId" name="did" value="0"/>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="text-left">部门名称</label>
                                    <input type="text" name="deptName" class="form-control" id="exampleInputName1"
                                           placeholder="请输入部门名称"/>
                                </div>
                                <label class="col-sm-3 col-form-label text-left">是否启用</label>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <div class="col-sm-4">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="radio" class="form-check-input" name="enable"
                                                           id="membershipRadios1" value="1" checked=""/>
                                                    是
                                                    <i class="input-helper"></i></label>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="radio" class="form-check-input" name="enable"
                                                           id="membershipRadios2" value="0"/>
                                                    否
                                                    <i class="input-helper"></i></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleTextarea1" class="text-left">职能描述</label>
                                    <textarea class="form-control" name="describe" id="exampleTextarea1"
                                              rows="4"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" id="editBtn" class="btn btn-primary" data-dismiss="modal">保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr class="table-danger">
                    <th>
                        部门名称
                    </th>
                    <th>
                        职能描述
                    </th>
                    <th>
                        成员数量
                    </th>
                    <th>
                        添加时间
                    </th>
                    <th>
                        是否启用
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="dept:${allDept}">
                    <td th:text="${dept.dName}"></td>
                    <td th:text="${dept.describe}"></td>
                    <td>
                        <!--隐藏域保存部门id-->
                        <input th:value="${dept.did}" type="hidden"/>
                        <a href="JavaScript:void(0);" name="getEmp" th:text="${dept.number}"></a>
                    </td>
                    <td th:text="${dept.createTimeStr}"></td>
                    <td th:if="${dept.enable} eq '1'">
                        <div class="form-check form-check-primary">
                            <label class="form-check-label">
                                <!--隐藏域保存部门id -->
                                <input th:value="${dept.did}" type="hidden"/>
                                <input th:value="${dept.enable}" name="detpCheck" type="checkbox"
                                       class="form-check-input" th:checked="checked"/>
                                是否启用
                                <i class="input-helper"></i></label>
                        </div>
                    </td>
                    <td th:if="${dept.enable} eq '0'">
                        <div class="form-check form-check-primary">
                            <label class="form-check-label">
                                <!--隐藏域保存部门id-->
                                <input th:value="${dept.did}" type="hidden"/>
                                <input th:value="${dept.enable}" name="detpCheck" type="checkbox"
                                       class="form-check-input"/>
                                是否启用
                                <i class="input-helper"></i></label>
                        </div>
                    </td>
                    <td>
                        <!--隐藏域保存部门id-->
                        <input th:value="${dept.did}" type="hidden"/>
                        <a href="javascript:void(0);" data-target="#myModal" name="updDeptBtn"
                           data-toggle="modal">编辑</a>&emsp;
                        <a href="javascript:void(0);" name="delBtn">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <br/>
            <div class="text-right">
                <p>
                    当前 <span id="cPage" th:text="${pageInfo.pageIndex}"></span> 页,总 <span id="totalPage"
                                                                                          th:text="${pageInfo.totalPageCount}"></span>
                    页,共 <span id="totalCount" th:text="${pageInfo.totalCount}"></span> 条记录
                </p>
                <a href="JavaScript:void(0);" onclick="first(1)">首页</a>&emsp;
                <a href="JavaScript:void(0);" id="per" onclick="per()">上一页</a>&emsp;
                <span th:text="${pageInfo.pageIndex}" style="color: red"></span>&emsp;
                <a href="JavaScript:void(0);" id="next" onclick="next()">下一页</a>&emsp;
                <a href="JavaScript:void(0);" onclick="last()">末页</a>
                <div class="nav-item dropdown">
                    <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#"
                       data-toggle="dropdown" aria-expanded="true">
                        请选择
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
                         aria-labelledby="messageDropdown">
                        <li th:each="int:${pageArr}"><a th:text="${int}" href="JavaScript:void(0)" name="pageTo" class="dropdown-item preview-item"></a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--jquery-->
<script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- plugins:js -->
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../../js/dashboard.js"></script>
<!-- End custom js for this page-->
<script type="text/javascript">
    $('.dropdown-toggle').dropdown()

    //跳首页
    function first(pageIndex) {
        ajaxPage(pageIndex);
    }

    //上一页
    function per() {
        var pageIndex = $("#cPage").html();
        if (parseInt(pageIndex) === 1) {
            alert("已到首页");
            return;
        }
        ajaxPage(parseInt(pageIndex) - 1);
    }

    //下一页
    function next() {
        var pageIndex = $("#cPage").html();
        var totalPage = $("#totalPage").html();
        if (pageIndex === totalPage) {
            alert("已到尾页");
            return;
        }
        ajaxPage(parseInt(pageIndex) + 1);
    }

    //末页
    function last() {
        var pageIndex = $("#totalPage").html();
        ajaxPage(pageIndex);
    }

    //分页ajax请求方法
    function ajaxPage(pageIndex) {
        $.ajax({
            "url": "/dept/selectPage?pageNum=" + pageIndex,
            "type": "get",
            "data": "",
            "dataType": "text",
            success: function (data) {
                $("#showTbody").load(data);
            },
            error: function () {
                alert("分页ajax异常")
            }
        });
    }

    $(function () {
        //点击获取该部门所有员工信息
        $("[name = getEmp]").click(function () {
            var $getEmp = $(this);
            var dId = $getEmp.prev().val();
            //根据部门id查询员工信息
            $("#showTbody").load("/emp/getAllEmp?dId="+dId);
        });

        //选择性跳页
        $("[name = pageTo]").click(function () {
            var $pageTo = $(this);
            var pageIndex = $pageTo.html();
            ajaxPage(pageIndex);
        });

        //删除部门
        $("[name = delBtn]").click(function () {
            var $delBtn = $(this);
            var delDeptId = $delBtn.prev().prev().val();
            //发送ajax请求删除部门
            $.ajax({
                "url": "/dept/delDept",
                "type": "post",
                "data": {
                    "delDeptId": delDeptId
                },
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/dept/select");
                },
                error: function () {
                    alert("ajax异常");
                }
            })
        });

        //修改部门信息
        $("[name = updDeptBtn]").click(function () {
            var updDept = $(this);
            // 获取要部门的id
            var updDid = updDept.prev().val();
            //发送ajax请求的到部门
            $.ajax({
                "url": "/dept/getOneDept?updDid=" + updDid,
                "type": "post",
                "data": "",
                "dataType": "json",
                success: function (data) {
                    $("#exampleInputName1").val(data.dName);
                    $("#exampleTextarea1").val(data.describe);
                    $("#editDeptId").val(data.did);
                    //将弹出层主题改为(修改部门)
                    $("#myModalLabel").html("修改部门")
                },
                error: function () {
                    alert("ajax异常");
                }
            });
        });

        //将弹出层主题改为(添加部门)
        $("#addDeptBtn").click(function () {
            $("#myModalLabel").html("添加部门")
        });

        //改是否启用的状态(enable)
        $("[name = detpCheck]").click(function () {
            var enableDept = $(this);
            var enable = enableDept.val();
            if (enable == 0) {
                enable = 1;
            } else {
                enable = 0;
            }
            enableDept.val(enable);
            var updEnable = enableDept.val();
            var deptId = enableDept.prev().val();
            //发送ajax请求修改启用状态
            $.ajax({
                "url": "/dept/updDeptEnable",
                "type": "post",
                "data": {
                    "deptId": deptId,
                    "updEnable": updEnable
                },
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                },
                error: function () {
                    alert("ajax异常");
                }
            });
        });

        //点击提交新增和修改操作
        $("#editBtn").click(function () {
                var editDeptFrom = $("#editDeptFrom");
                var deptId = $("#editDeptId").val();
                $.ajax({
                    //发送新增ajax请求
                    "url": "/dept/addDept?department=" + editDeptFrom.serialize(),
                    "type": "post",
                    "data": {
                        "deptId": deptId
                    },
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/dept/select");
                },
                error: function () {
                    alert("ajax异常");
                }
            })
        });
    });
</script>
</body>

</html>
